<template>
    <div class="relative flex flex-row justify-evenly">
        <div class="flex-grow mx-4">
            <div class="flex flex-row place-items-center justify-evenly w-full">
                <div
                    class="rounded-full flex place-content-center outline outline-4 outline-zinc-700 shadow-xl shadow-zinc-800"
                    :style="{
                        background: store.usingColorCss
                    }"
                >
                    <div class="h-16 w-16"></div>
                </div>
                <HSL class="w-64 bg-zinc-700 py-2 px-6 shadow-lg shadow-zinc-800 flex-none"></HSL>
                <GradColor class="shadow-lg shadow-zinc-800 flex-none"></GradColor>
            </div>

            <div
                class="flex flex-row items-center text-white my-4 bg-zinc-700 shadow-lg shadow-zinc-800 p-2 rounded-full justify-evenly"
            >
                <div>{{ store.usingPallet!.name }}</div>
                <div class="flex flex-row overflow-x-auto p-2 space-x-4">
                    <div
                        v-for="(pallet, index) in store.usingPallet!.colors"
                        class="w-6 h-6 rounded-full transition-transform duration-300 outline outline-zinc-100 flex-none"
                        :class="[index === store.selectingColorIndex && 'scale-125']"
                        @click="selectColor(index)"
                        :style="{ background: pallet }"
                    ></div>
                </div>
                <div class="flex flex-row">
                    <Icon class="btn" @click="store.writeToPallet()">create</Icon>
                    <Icon class="btn" @click="store.resetColor()">replay</Icon>
                    <Icon class="btn" @click="store.addColorToPallet()">add</Icon>
                    <Icon class="btn" @click="store.deleteColorFromPallet()">delete</Icon>
                </div>
            </div>
        </div>
        <transition name="popLeft">
            <Recommend
                v-if="store.sideBar"
                class="absolute right-0 z-10 top-0 bg-zinc-700/80 shadow-lg shadow-zinc-800 p-2 rounded-lg h-64 overflow-y-auto flex-none"
            ></Recommend>
        </transition>
    </div>
</template>


<style scoped>
.btn {
    @apply text-white hover:bg-white hover:text-black p-1 rounded-full outline outline-zinc-100 transition-colors mx-2;
}
.popLeft-enter-active,
.popLeft-leave-active {
    transition: opacity 0.5s ease,
        transform 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

.popLeft-enter-from,
.popLeft-leave-to {
    @apply translate-x-10 opacity-0;
}
</style>

<script lang="ts" setup>
import HSL from './HSL.vue';
import { useColorPanelStore } from '../store';
import GradColor from './GradColor.vue';
import Recommend from './Recommend.vue';
import Icon from '@konghayao/vue-material-icons';

const store = useColorPanelStore()
const selectColor = (index: number) => {
    store.selectingColorIndex = index
    store.resetColor()
    console.log(index);
}
</script>
